<template>
    <div>
      <Table :columns="tableFieldCol"
      :data="tableData" border :show-context-menu="contextMenus && contextMenus.length > 0"
      :context-menu="contextMenus && contextMenus.length > 0"
      @on-contextmenu="contextMenuFun"
      >
        <template slot-scope="{ row }" v-for="(val, key) in slotConfig" :slot="key">
          <div v-html="createTableTem(val, row)" :key="key"></div>
        </template>
        <template slot="contextMenu" v-if="contextMenus && contextMenus.length > 0">
            <DropdownItem v-for="(item, i) in contextMenus" :key="i" @click.native="contextMenuClick(item.click)"
            :style="{color: item.color || ''}">{{item.name}}</DropdownItem>
        </template>
      </Table>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'TableViewCom',
  props: {
    datas: {
      type: Array,
      default: () => []
    },
    col: {
      type: Array,
      default: () => []
    },
    slots: {
      type: Object,
      default: () => {}
    },
    contextMenu: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    'datas': {
      handler: function (e) {
        this.tableData = e || []
      }
    },
    'col': {
      handler: function (e) {
        this.tableFieldCol = e || []
      }
    },
    'slots': {
      handler: function (e) {
        this.slotConfig = e || {}
      }
    },
    'contextMenu': {
      handler: function (e) {
        console.log(e)
        this.contextMenus = e || []
      }
    }
  },
  data () {
    return {
      tableData: this.datas,
      tableFieldCol: this.col,
      slotConfig: this.slots,
      contextMenus: this.contextMenu,
      // 行数据
      rowData: undefined
    }
  },
  methods: {
    createTableTem (html, row) {
      // console.log(html, row)
      const vm = new (Vue.extend({
        template: `<div>${html}</div>`,
        data () {
          return {
            row: row
          }
        }
      }))().$mount()
      return vm.$el.outerHTML
    },
    contextMenuFun (row) {
      this.rowData = row
    },
    contextMenuClick (fun) {
      fun(this.rowData)
    }
  }
}
</script>

<style scoped>

</style>
